<template>
  <div class="Line" id="lineRef"></div>
</template>
<script setup>
  import * as echarts from "echarts";
  const props = defineProps({
    xAxis:{
      type:Array,
      default:() => []
    },
    yData:{
      type:Array,
      default:() => [155,210]
    }
  })

  onMounted(() => {
    initChart();
  });
  function initChart() {
    const lineRef = echarts.init(document.getElementById('lineRef'));
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      legend:{
        show: true,  
        data: ['版本']
      },
      xAxis: {
        type: 'category',
        data: props.xAxis
      },
      yAxis: {
        type: 'value',
        name:"个",
        axisLine:{
          show:true
        }
      },
      series: [
        {
          data: props.yData,
          type: 'line',
          lineStyle:{
            color:"#A18CF1"
          },
          areaStyle: {
            color:new echarts.graphic.LinearGradient(0,1,0,0,[
              {
                offset:0,
                color:"#EDE7FE"
              },
              {
                offset:1,
                color:"#B3A2F4"
              },
            ])
          }
        }
      ]
    };
    lineRef.setOption(option);
  }
</script>
<style scoped>
/* @import url(); 引入css类 */
.Line{
  width: 100%;
  height: 400px;
}
</style>
